<script setup>
import { useRouter } from "vue-router";
import { getUserFollowListService, deleteUserFollowService } from "@/api/user";
const router = useRouter();
import { ref, onMounted, computed } from "vue";
import { showToast, showConfirmDialog } from "@/utils/vant-ui";
const followList = ref([]);
const showDetail = ref(false);
const currentUser = ref(null);
// 模拟话题类型数据
const topicTypes = [
  "科技前沿",
  "文化艺术",
  "体育运动",
  "经济金融",
  "健康生活",
  "教育培训",
  "娱乐休闲",
  "社会热点",
  "旅游风光",
  "美食烹饪",
];

// 获取关注列表
const getFollowList = async () => {
  await getUserFollowListService().then((res) => {
    if (res.code === 200) {
      followList.value = res.data;
      showToast("获取关注列表成功");
    }
  });
};

// 计算当前用户喜欢的话题
const currentUserTopics = computed(() => {
  if (!currentUser.value || !currentUser.value.userTopicLike) return [];

  try {
    // 将字符串转换为数字数组
    const topicIds = currentUser.value.userTopicLike
      .split(",")
      .map((id) => parseInt(id.trim()));
    // 获取对应的话题文本
    return topicIds.map((id) => topicTypes[id]);
  } catch (error) {
    console.error("计算用户喜欢的话题失败:", error);
    return [];
  }
});

// 显示用户详情
const showUserDetail = (user) => {
  currentUser.value = user;
  showDetail.value = true;
};
// 处理删除操作
const handleDelete = (userId) => {
  showConfirmDialog({
    title: "取消关注",
    message: "确定要取消关注该用户吗？",
  })
    .then(() => {
      // 确认删除，调用删除函数
      deleteFollow(userId);
      console.log(userId);
    })
    .catch(() => {
      // 用户取消操作
      showToast("已取消");
    });
};
const deleteFollow = async (userId) => {
  await deleteUserFollowService(userId).then((res) => {
    console.log(res);
    if (res.code === 200) {
      showToast("取消关注成功");
      getFollowList();
    }
  });
};

// 返回上一页
const onClickLeft = () => {
  router.back();
};

onMounted(() => {
  getFollowList();
});
</script>
<template>
  <div class="follow">
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar
        title="关注列表"
        left-arrow
        text-light
        right-text="帮助"
        @click-left="onClickLeft"
      />
    </div>
    <!-- 用户列表 -->
    <div class="user-list">
      <van-swipe-cell v-for="user in followList" :key="user.id">
        <!-- 用户信息展示 -->
        <van-cell
          :title="user.userName"
          :value="`积分: ${user.userPoints}`"
          :label="`年龄: ${user.userAge} | 性别: ${user.userSex === 1 ? '男' : '女'}`"
          is-link
          @click="showUserDetail(user)"
        />

        <!-- 右滑后显示的删除按钮 -->
        <template #right>
          <van-button
            square
            text="取消关注"
            type="danger"
            class="delete-button"
            @click="handleDelete(user.id)"
          />
        </template>
      </van-swipe-cell>
      <!-- <van-cell-group inset>
        <van-cell
          v-for="user in followList"
          :key="user.id"
          :title="user.userName"
          :value="`积分: ${user.userPoints}`"
          :label="`年龄: ${user.userAge} | 性别: ${user.userSex === 1 ? '男' : '女'}`"
          is-link
          @click="showUserDetail(user)"
        />
      </van-cell-group> -->
    </div>

    <!-- 用户详情弹出层 -->
    <van-popup
      v-model:show="showDetail"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="user-detail">
        <h2 class="user-detail-title">
          {{ currentUser?.userName }} 的详细信息
        </h2>
        <van-cell-group inset>
          <van-cell title="用户名" :value="currentUser?.userName" />
          <van-cell
            title="性别"
            :value="currentUser?.userSex === 1 ? '男' : '女'"
          />
          <van-cell title="年龄" :value="currentUser?.userAge" />
          <van-cell title="积分" :value="currentUser?.userPoints" />
          <van-cell title="裁判次数" :value="currentUser?.userJudegNum || 0" />
          <van-cell title="喜欢的话题">
            <van-tag
              v-for="(topic, index) in currentUserTopics"
              :key="index"
              type="primary"
              size="small"
              style="margin-right: 5px; margin-bottom: 5px"
            >
              {{ topic }}
            </van-tag>
          </van-cell>
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>
<style lang="less" scoped>
.follow {
  .follow {
    min-height: 100vh;
    background-color: #f5f5f5;
  }
  .user-list {
    margin-top: 10px;
  }
  // 删除按钮样式
  .delete-button {
    height: 100%;
  }
  .user-detail {
    padding: 10px;
    .user-detail-title {
      text-align: center;
      margin-bottom: 20px;
      font-size: 18px;
    }
  }
}
</style>
